<template>
  <el-container>

    <!--头部-->
    <el-header style="z-index: 99;height: 50px">
      <my-header></my-header>
    </el-header>

    <!--内容区-->
    <el-main>
        <el-button type="primary"
                   circle plain
                   icon="el-icon-d-arrow-left"
                   @click="goto($event.target)"
                   v-if="this.$route.path !== '/'"
                   class="return"></el-button>
      <transition name="fade" mode="out-in">
<!--        <keep-alive>
          <router-view></router-view>
        </keep-alive>-->
        <router-view ></router-view>
      </transition>

        <!--返回顶部-->
        <template>
            <el-backtop></el-backtop>
        </template>
    </el-main>

    <el-footer style="height: fit-content">
        <ServiceFooter></ServiceFooter>
        <MyFooter></MyFooter>
    </el-footer>
  </el-container>
</template>

<script>
  //公共组件
  import MyHeader from "@/components/common/Header";
  import ServiceFooter from "@/components/common/ServiceFooter";
  import MyFooter from "@/components/common/Footer";

  export default {
      name: "my-main",
      components : {MyHeader,MyFooter,ServiceFooter},
      data(){
          return{
              user:{},
          }
      },
      methods : {
          goto(event){
              this.$router.go(-1);
              if(event.nodeName === 'SPAN' || event.nodeName === 'I'){
                  event = event.parentNode;
              }
              event.blur();
          }
      },
      watch: {
/*          '$route' (to, from) {
              console.log("watch=========", to, from)
              const toDepth = to.path.split('/').length
              const fromDepth = from.path.split('/').length
              console.log("watch=========", toDepth, fromDepth)

              this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
          }*/
      },

      beforeMount(){
          //this.user = JSON.parse(window.sessionStorage.getItem("user"))
      },
      mounted(){//页面挂载之后
      },
  }
</script>

<style scoped>
    .fade-enter {
        opacity:0.1;
    }
    .fade-leave{
        opacity:1;
    }
    .fade-enter-active{
        transition:opacity 0.3s;
    }
    .fade-leave-active{
        opacity:0.1;
        transition:opacity 0.3s;
    }

    /*返回按钮*/
    .return{
        position: fixed;
        right: 40px;
    }


    .el-container{
        width: 100%;
        height: fit-content;
        min-height: 100%;
    }

    .el-header{
        padding: 0;
    }

    .el-main {
        padding: 20px 0 0 0;
        height: fit-content;
        background-color: #fff;
    }
    .el-footer{
        padding: 0;
        height: fit-content;
    }
</style>
